<template>
  <div class="linenRinse-content">
    <div class="linenRinseBox">
      <div class="headerBox">
        <div class="line"></div>
        <div class="title">查看布草清洗记录</div>
      </div>
      <el-table :data="linenRinseData" border>
        <el-table-column label="清洗日期" align="center" prop="cleanTime" />
        <el-table-column label="清洗数量" align="center" prop="cleanCount" />
        <el-table-column label="清洗类型" align="center" prop="type">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.clean_type" :value="scope.row.type" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" prop="B">
          <template slot-scope="scope">
            <el-button class="preview" @click="handleDetail(scope.row)" size="mini" type="text">
              查看图片
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination v-show="total>0" :total="total" :page.sync="params.pageNum" :limit.sync="params.pageSize"
      @pagination="getlinenRinseFn" />
    <div class="bottomBtnCss">
      <el-button @click="goBackBtn">返回</el-button>

    </div>
    <el-image-viewer
      v-if="showViewer"
      :on-close="()=>{showViewer = false}"
      :url-list="[picUrl]"
    />
  </div>
</template>

<script>
  import {
    getlinenRinse
  } from "@/api/zhangping/publicPlaceHealth";
  import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
  export default {
    dicts: ['clean_type'],
    components: {
      ElImageViewer
    },
    data() {
      return {
        showViewer:false,
        picUrl:'',
        linenRinseData: [],
        creditCode: null,
        params: {
          pageNum: 1,
          pageSize: 10
        },
        total: 0,
      };
    },
    created() {
      this.creditCode = this.$route.query.creditCode
      this.getlinenRinseFn()
    },
    methods: {
      handleDetail(item) {
        this.showViewer = true
        this.picUrl = process.env.VUE_APP_BASE_API + item.picUrl
      },
      getlinenRinseFn() {
        let data = {
          creditCode: this.creditCode,
          ...this.params
        }
        getlinenRinse(data).then(res => {
          if (res.code == 200) {
            this.linenRinseData = res.rows
            this.linenRinseData.picUrl = [res.rows.picUrl]
            this.total = res.total
          } else {
            this.$message.error(res.msg);
          }
        })
      },
      goBackBtn() {
        this.$router.back()
      },
    }
  };
</script>
<style lang="scss" scoped>
  .display-fx-center {
    display: flex;
    align-items: center;
  }

  .per100 {
    width: 100% !important;
  }

  .soildTop {
    border-top: solid 1px #D3D8E2;
  }

  .linenRinse-content {
    overflow-y: auto;
    position: relative;
    background-color: #fff;
    padding: 40px 20px;
    border-radius: 10px;
    height: calc(100vh - 66px - 40px);

    .linenRinseBox {
      padding-bottom: 40px;

    }

    .headerBox {
      font-size: 16px;
      color: #484848;
      font-weight: bold;
      // margin-top:40px;/
      margin-bottom: 15px;
      @extend .display-fx-center;

      .line {
        width: 4px;
        height: 12px;
        background: #5D85FF;
        border-radius: 6px 6px 6px 6px;
        margin-right: 6px;
      }
    }
  }

  .bottomBtnCss {
    margin-top: auto;
    text-align: right;
    position: absolute;
    bottom: 20px;
    right: 20px;
  }

  .preview {
    position: relative;

    .image {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      opacity: 0;
    }
  }

  ::v-deep {
    .el-table__header-wrapper th {
      background: #F4F8FF !important;
    }
  }
</style>
